<template>
  <div class="statistics-container">
    <div class="header">
      <h1>统计分析</h1>
    </div>
    
    <div class="content">
      <div class="stats-overview">
        <a-row :gutter="24">
          <a-col :span="6">
            <div class="stat-card">
              <div class="stat-icon">
                <UserOutlined />
              </div>
              <div class="stat-content">
                <div class="stat-value">1,234</div>
                <div class="stat-label">总用户数</div>
              </div>
            </div>
          </a-col>
          
          <a-col :span="6">
            <div class="stat-card">
              <div class="stat-icon">
                <ApiOutlined />
              </div>
              <div class="stat-content">
                <div class="stat-value">5,678</div>
                <div class="stat-label">API调用次数</div>
              </div>
            </div>
          </a-col>
          
          <a-col :span="6">
            <div class="stat-card">
              <div class="stat-icon">
                <FileTextOutlined />
              </div>
              <div class="stat-content">
                <div class="stat-value">89</div>
                <div class="stat-label">文档数量</div>
              </div>
            </div>
          </a-col>
          
          <a-col :span="6">
            <div class="stat-card">
              <div class="stat-icon">
                <EyeOutlined />
              </div>
              <div class="stat-content">
                <div class="stat-value">12,345</div>
                <div class="stat-label">页面访问量</div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
      
      <div class="charts-section">
        <a-row :gutter="24">
          <a-col :span="12">
            <div class="chart-card">
              <h3>用户增长趋势</h3>
              <div class="chart-placeholder">
                <div class="chart-mock">
                  <div class="chart-bar" style="height: 60%"></div>
                  <div class="chart-bar" style="height: 80%"></div>
                  <div class="chart-bar" style="height: 45%"></div>
                  <div class="chart-bar" style="height: 90%"></div>
                  <div class="chart-bar" style="height: 70%"></div>
                  <div class="chart-bar" style="height: 95%"></div>
                </div>
              </div>
            </div>
          </a-col>
          
          <a-col :span="12">
            <div class="chart-card">
              <h3>API使用分布</h3>
              <div class="chart-placeholder">
                <div class="pie-chart-mock">
                  <div class="pie-segment" style="background: #1890ff;"></div>
                  <div class="pie-segment" style="background: #52c41a;"></div>
                  <div class="pie-segment" style="background: #fa8c16;"></div>
                  <div class="pie-segment" style="background: #f5222d;"></div>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
      
      <div class="data-table-section">
        <div class="table-card">
          <h3>最近访问记录</h3>
          <a-table :columns="accessColumns" :data-source="accessData" :pagination="{ pageSize: 5 }" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { UserOutlined, ApiOutlined, FileTextOutlined, EyeOutlined } from '@ant-design/icons-vue'

const accessColumns = [
  { title: '用户', dataIndex: 'user', key: 'user' },
  { title: '访问页面', dataIndex: 'page', key: 'page' },
  { title: '访问时间', dataIndex: 'time', key: 'time' },
  { title: 'IP地址', dataIndex: 'ip', key: 'ip' }
]

const accessData = [
  { key: 1, user: '张三', page: '技术规范文档', time: '2024-01-15 14:30:25', ip: '192.168.1.100' },
  { key: 2, user: '李四', page: 'API接口文档', time: '2024-01-15 14:25:18', ip: '192.168.1.101' },
  { key: 3, user: '王五', page: '帮助文档', time: '2024-01-15 14:20:12', ip: '192.168.1.102' },
  { key: 4, user: '赵六', page: '历史版本', time: '2024-01-15 14:15:08', ip: '192.168.1.103' },
  { key: 5, user: '钱七', page: 'RDP工具', time: '2024-01-15 14:10:05', ip: '192.168.1.104' }
]
</script>

<style scoped>
.statistics-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.header {
  padding: 24px 32px;
  border-bottom: 1px solid #f0f0f0;
}

.header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #262626;
}

.content {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
}

.stats-overview {
  margin-bottom: 32px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 24px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}

.stat-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1890ff;
  border-radius: 8px;
  color: #fff;
  font-size: 24px;
  margin-right: 16px;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #262626;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #8c8c8c;
}

.charts-section {
  margin-bottom: 32px;
}

.chart-card, .table-card {
  padding: 24px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}

.chart-card h3, .table-card h3 {
  color: #262626;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}

.chart-placeholder {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
}

.chart-mock {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 120px;
}

.chart-bar {
  width: 20px;
  background: #1890ff;
  border-radius: 2px 2px 0 0;
  opacity: 0.8;
}

.pie-chart-mock {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.pie-segment {
  flex: 1;
  height: 100%;
}

.data-table-section {
  margin-bottom: 32px;
}
</style>